<template>
  <div style="display: flex;align-items: center;justify-content: center;background-color: #548cff;height: 100vh">
    <div style="display: flex;background-color: #ffffff;width: 50%;overflow: hidden;border-radius: 5px;opacity:0.9">
      <div style="flex: 1;display: flex;justify-items: center;justify-items: center;">
        <img src="@/assets/login.png" style="width: 100%;">
      </div>
      <div style="flex: 1;display: flex;align-items: center;justify-content: center;">
        <el-form :model="user" :rules="rules" ref="registerRef" style="width: 80%">
          <div style="font-size: 20px;font-weight: bold;text-align: center;margin-bottom: 20px">欢迎注册后台管理系统</div>
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入用户名" v-model="user.username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
          </el-form-item>
          <el-form-item prop="nextPassword">
            <div style="display: flex">
              <el-input prefix-icon="el-icon-camera" size="medium" show-password style="flex: 1" placeholder="请输入确认密码" v-model="user.nextPassword"></el-input>
            </div>
          </el-form-item>
          <el-form-item prop="role">
            <el-radio-group v-model="user.role">
              <el-radio label="用户"></el-radio>
              <el-radio label="商家"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
            <el-button type="success" style="width: 100%" @click="register">注 册</el-button>
          </el-form-item>
          <el-form-item>
            <div style="display: flex;">
              <div style="flex: 1">
                已经有账号?请<span style="color: rgb(103, 194, 58);cursor: pointer" @click="$router.push('/login')">登陆</span>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  name: "Register",

  data(){
    const nextPassword= (rule, value, callback)=>{
      if (value === ''){
        callback(new Error('请输入确认密码'));
      }else if(value !== this.user.password){
        callback(new Error('输入的确认密码不正确'));
      }else {
        callback()
      }
    }
    return{
      user:{
        username:'',
        password:'',
        nextPassword:''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
        nextPassword:[{ validator: nextPassword, trigger: 'blur' }],
        role:[{ required: true, message: '请输入角色', trigger: 'blur' }],
      }
    }
  },
  methods:{
    register(){
      this.$refs["registerRef"].validate((valid) => {
        if (valid) {
          this.$request.post("/register",this.user).then(res=>{
            console.log(res)

            if (res.code === '200'){
              localStorage.setItem('user',JSON.stringify(res.data))
              this.$router.push("/login")
              this.$message.success("注册成功")
            }else {
              this.$message.error(res.msg)
            }
          },error=>{
            console.log(error)
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>